<!DOCTYPE html>
<html>
<head>
    <title>测试地址</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keyword" content="">
    <script src="jquery-2.0.3.js"></script>
    <style>
        .all {width:1000px;margin:10px auto;text-align: center;}
        #box {border:1px solid #000;}
        ul {list-style: none;margin:0;padding:0;}
        #tab {height:30px;line-height: 30px;background-color: black;}
        #tab li {float:left;color:#fff;padding:0 10px;}
        .current {background-color: #ccc;}
        #content ul {padding:10px 0;display: none;line-height: 30px;}
    </style>
</head>
<body>
<div class="all">
    <div id="box">
        <ul id="tab">
            <li class="current">第一课</li>
            <li>第二课</li>
            <li>第三课</li>
            <div style="clear: both"></div>
        </ul>
        <div id="content">
            <ul style="display: block">
                <li>列表1</li>
            </ul>
            <ul>
                <li>列表2</li>
            </ul>
            <ul>
                <li>列表3</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(function(){
        //确认下要操作的元素是谁？tab 下面的所有的li
        $('#tab li').each(function(index){
            //每一个li元素要进行操作的话，$(this)代表着每一个li元素
            $(this).hover(function(){
                //然后我们开始业务逻辑了
                $('#tab li').each(function(index){
                    $('#tab li').eq(index).removeClass('current');
                })
                //把当前的li添加一个class
                $(this).addClass('current');
                //让content变化
                $('#content ul').each(function(index){
                    $('#content ul').eq(index).css('display','none');
                })
                //让当前的li所对应的content里面的ul显示
                $('#content ul').eq(index).css('display','block');
            })
        })

    })

</script>